useState
useState 屬於 React Hook 的一種,回傳一個包含兩個值的 Array
使用語法為 const [state, setState] = useState(state的初始值)
//舉例
const[age, setAge] = useState("10歲");
setAge("20歲");
上方例子中的意思是,宣告了一個age
的變數,第一個age
的初始值是10歲
後方的setAge
則是「更新初始值的方法」,在第二行呼叫了setAge
並賦予值
這時候原本age
的10歲
,將會被改變為20歲
接著以下例子我們建立一個Button的Function
,並在Function中賦予名稱為count
的
變數,透過呼叫setCount
的方法,在我們每一次點擊按鈕時對count
初始值往上+1
import React, { useState } from "react";
function Button() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default Button;
初始值
點擊按鈕1次
點擊按鈕2次